/**
 * @description  : 从业人员登记
 * @descriptionDetail : 从业人员登记
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:25:10
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="right-icon" @click="confirm">
        确定
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP-->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content u-page">
      <u-form
        :error-type="errorType"
        class="fpad"
        :model="person"
        :label-width="240"
        label-position="left"
        ref="uForm"
      >
        <u-form-item :required="true" label="姓名" prop="personName">
          <u-input type="text" :border="false" input-align="right" placeholder="请输入姓名" v-model="person.personName" />
        </u-form-item>
        <u-form-item :required="true" :label="person.isHaveLicense?'与持证人关系':'与经营者关系'" prop="relationship">
          <dic-input
            :needValid="true"
            input-align="right"
            :keyWord="$u.dic.DIC_KEYS.RETAILER_RELATIONSHIP"
            :dicCode="person.relationship"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('relationship',$u.dic.DIC_KEYS.RETAILER_RELATIONSHIP)"
            placeholder="请选择"
            :disabled="isDisabled"
            v-if="person.isHaveLicense"
            v-model="person.relationshipName"
            @changeInputModelData="(name)=>{$set(person, 'relationshipName', name)}"
            @click="showDic($u.dic.DIC_KEYS.RETAILER_RELATIONSHIP,person.relationship,'relationship')"
          />
          <dic-input
            :needValid="true"
            input-align="right"
            :keyWord="$u.dic.DIC_KEYS.L_RELATIONSHIP"
            :dicCode="person.relationship"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('relationship',$u.dic.DIC_KEYS.L_RELATIONSHIP)"
            placeholder="请选择"
            :disabled="isDisabled"
            v-else
            v-model="person.relationshipName"
            @changeInputModelData="(name)=>{$set(person, 'relationshipName', name)}"
            @click="showDic($u.dic.DIC_KEYS.L_RELATIONSHIP,person.relationship,'relationship')"
          />
        </u-form-item>
        <u-form-item label="手机号码" label-width="240" prop="contactMobile">
          <u-input placeholder="请输入手机号码" input-align="right" v-model="person.contactMobile" />
        </u-form-item>
        <u-form-item label="性别">
          <dic-input
            input-align="right"
            :keyWord="$u.dic.DIC_KEYS.BSC_GENDDER"
            :dicCode="person.personGender"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('personGender',$u.dic.DIC_KEYS.BSC_GENDDER)"
            placeholder="请选择"
            :disabled="isDisabled"
            v-model="person.personGenderName"
            @changeInputModelData="(name)=>{$set(person, 'personGenderName', name)}"
            @click="showDic($u.dic.DIC_KEYS.BSC_GENDDER,person.personGender,'personGender')"
          />
        </u-form-item>
        <u-form-item label="身份证号" prop="credNum">
          <u-input type="text" :border="false" input-align="right" placeholder="请输入身份证号" v-model="person.credNum" />
        </u-form-item>
        <u-form-item label="籍贯" prop="personLocalCode">
          <u-input
            input-align="right"
            type="select"
            :border="false"
            placeholder="请选择"
            v-model="person.personLocal"
            @click="areaShow = true"
          />
        </u-form-item>
        <u-form-item label="民族" prop="personNative">
          <dic-input
            input-align="right"
            :keyWord="$u.dic.DIC_KEYS.NATION_LIST"
            :dicCode="person.personNative"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('personNative',$u.dic.DIC_KEYS.NATION_LIST)"
            placeholder="请选择"
            :disabled="isDisabled"
            v-model="person.personNativeName"
            @changeInputModelData="(name)=>{$set(person, 'personNativeName', name)}"
            @click="showDic($u.dic.DIC_KEYS.NATION_LIST,person.personNative,'personNative')"
          />
        </u-form-item>
        <u-form-item label-position="top" label="现居住地址" prop="currentAddr">
          <u-input type="textarea" :border="false" placeholder="请输入现居住地址" v-model="person.currentAddr" />
        </u-form-item>
        <u-form-item label-position="top" label="身份证地址" prop="credAddr">
          <u-input type="textarea" :border="false" placeholder="请输入身份证地址" v-model="person.credAddr" />
        </u-form-item>
        <u-form-item label="上传照片" label-position="top">
          <view class="zk-img-content">
            <m-upload
              :deletable="true"
              :maxCount="picIds"
              width="150rpx"
              height="150rpx"
              :file-list="fileList"
              :multiple="true"
              index="fileList"
              :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.m_unlicense_attr}"
              upApiUrl="uploadBase64ForApp"
              ref="filePicUpload"
              @on-list-change="changeUpload"
            >
            </m-upload>
          </view>
        </u-form-item>
      </u-form>
      <!-- 下拉选择用 -->
      <dic-choice
        :keyWord="dicKeyWords"
        :currentSelect="dicCurrentSelect"
        v-model="dicShow"
        @confirm="selectDicConfirm"
      ></dic-choice>
      <u-popup mode="bottom" height="80%" v-model="areaShow">
        <area-select @choose="areaShowComfir"></area-select>
      </u-popup>
    </view>
  </view>
</template>

<script>
	import DicChoice from "@/components/dic_choice.vue";
	import DicInput from "@/components/dic_input.vue";
	import areaSelect from "@/components/area-select.vue";
	import mUpload from '@/components/m-upload.vue';
	import {
		PATHROOT,
	} from "@/common/path.config";
	import commService from "@/service/common/common.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			DicChoice,
			DicInput,
			areaSelect,
			mUpload,
			fabButton
		},
		onLoad(opt) {
			let p = this.getRouteParam();
			for (let prop in p) {
				if (Object.prototype.hasOwnProperty.call(p, prop)) {
					this.person[prop] = p[prop];
				}
			}
			if (p.personUuid) {
				commService.goFiles(p.personUuid, this.$FILE_GROUP_TYPE.m_unlicense_attr).then((rs) => {
					if (rs.success) {
						rs.data.forEach((item) => {
							this.fileList.push({
								fileId: item.gfiId,
								gfiId: item.gfiId,
							});
						})
					}
				})
			}

		},
		data() {
			return {
				errorType: ['border-bottom', 'message', ],
				person: {},
				dicType: "",
				// dic_select 是否显示
				dicShow: false,
				// dic 关键字
				dicKeyWords: "",
				// dic 当前选择项
				dicCurrentSelect: "",
				isDisabled: true,
				areaShow: false,
				rules: {
					personName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change', ],
					}, ],
					relationship: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change', ],
					}, ],
					contactMobile: [{
						validator: (rule, value) => {
							return !value || this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur', ],
					}, ],
					credNum: [{
						validator: (rule, value) => {
							return !value || this.$u.test.idCard(value);
						},
						message: '身份证号码不正确',
						trigger: ['change', 'blur', ],
					}, ],
				},
				fileRoot: PATHROOT.BASE + "/commonfile/filestore/downloadFile.do",
				picIds: 20,
				fileList: [],
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			}
		},
		mounted() {
			this.setRightBtns();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.confirm();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.confirm();
				}
			},
			dicSelectOpen(type, keyWords) {
				if (type == this.dicType) {
					if (this.dicKeyWords == keyWords && this.dicShow) {
						return true;
					}
					return false;
				}
			},
			showDic(key, cur, type) {
				if (this.dicShow) return;
				this.dicKeyWords = key;
				this.dicCurrentSelect = cur;
				this.dicShow = true;
				this.dicType = type;
			},
			/**
			 * @description 下拉选中确定事件，处理选中的结果绑定至数据
			 * @params e 选中的结果数据
			 */
			selectDicConfirm(e) {
				if (this.dicKeyWords == this.$u.dic.DIC_KEYS.RETAILER_RELATIONSHIP || this.dicKeyWords == this.$u.dic
					.DIC_KEYS.L_RELATIONSHIP) { // 地区类型
					this.person.relationshipName = e[0].label;
					this.person.relationship = e[0].extra.bcbCode;
				} else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.BSC_GENDDER) { // 性别
					this.person.personGenderName = e[0].label;
					this.person.personGender = e[0].extra.bcbCode;
				} else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.RETAILER_CRED_TYPE) { // 证件类型
					this.person.credTypeName = e[0].label;
					this.person.credType = e[0].extra.bcbCode;
				} else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.NATION_LIST) { // 民族
					this.person.personNativeName = e[0].label;
					this.person.personNative = e[0].extra.bcbCode;
				}
			},
			areaShowComfir(areas) {
				if (this.$modal.isMuniCity(areas[0].proCode)) {
					this.person.personLocal = [areas[0].admdivName, areas[0].countryName, ].join("");
				} else {
					this.person.personLocal = [areas[0].proName, areas[0].admdivName, areas[0].countryName, ].join("");
				}
				this.person.provCode = areas[0].proCode;
				this.person.cityCode = areas[0].admdivCode;
				this.person.countyCode = areas[0].countryCode;
				this.person.personLocalCode = areas[0].countryCode;
				this.areaShow = false;
			},
			// 上传/删除图片事件
			changeUpload(list, key) {
				if (list.length > 0) {
					this.fileList = [...list, ];
				} else {
					this.fileList = [];
				}
			},
			confirm() {
				let self = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let pp = {};
						for (let prop in self.person) {
							if (Object.prototype.hasOwnProperty.call(self.person, prop)) {
								pp[prop] = self.person[prop];
							}
						}
						let newFileList = [];
						this.fileList.forEach(itm => {
							let objImg = {
								fileId: itm.gfiId,
								gfiId: itm.gfiId,
								name: itm.gfiStoreName,
								size: itm.gfiSize,
								type: 'image/' + itm.gfiSuffix,
								status: "done",
								url: this.fileRoot + '?tk=' + this.curUser.tk + '&fileId=' + itm.gfiId,
							}
							newFileList.push(objImg);
						});
						pp['fileList'] = newFileList;
						self.backPrev({
							paramKey: "person",
							param: pp,
						});
					}
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.right-icon {
		padding: 0 25rpx;
		font-size: 30rpx;
		color: white;
	}

	.fpad {
		padding: 20rpx 30rpx;
	}
</style>
